<template>
	<view class="container">
		<u-navbar
			title="系统设置"
			:autoBack="true"
			fixed
			placeholder
		></u-navbar>
		
		<view class="content">
			<u-cell-group title="基本设置">
				<u-cell
					title="推送通知"
					:value="notificationText"
					isLink
					@click="showNotificationSetting"
				></u-cell>
				<u-cell
					title="声音与振动"
					:value="soundEnabled ? '开启' : '关闭'"
					@click="toggleSound"
				>
					<u-switch
						v-model="soundEnabled"
						slot="right-icon"
						size="40"
						@change="toggleSound"
					></u-switch>
				</u-cell>
				<u-cell
					title="深色模式"
					:value="darkModeText"
					isLink
					@click="showDarkModeSetting"
				></u-cell>
				<u-cell
					title="字体大小"
					:value="fontSizeText"
					isLink
					@click="showFontSizeSetting"
				></u-cell>
			</u-cell-group>
			
			<u-cell-group title="存储与缓存" margin-top="20">
				<u-cell
					title="清除缓存"
					:value="cacheSize"
					isLink
					@click="clearCache"
				></u-cell>
				<u-cell
					title="数据备份"
					isLink
					@click="backupData"
				></u-cell>
			</u-cell-group>
			
			<u-cell-group title="关于" margin-top="20">
				<u-cell
					title="当前版本"
					value="1.0.0"
				></u-cell>
				<u-cell
					title="检查更新"
					isLink
					@click="checkUpdate"
				></u-cell>
				<u-cell
					title="用户协议"
					isLink
					@click="showAgreement('user')"
				></u-cell>
				<u-cell
					title="隐私政策"
					isLink
					@click="showAgreement('privacy')"
				></u-cell>
			</u-cell-group>
		</view>
		
		<!-- 弹出选择 - 通知设置 -->
		<u-action-sheet
			:list="notificationOptions"
			v-model="showNotificationPopup"
			@click="setNotification"
			cancelText="取消"
		></u-action-sheet>
		
		<!-- 弹出选择 - 深色模式 -->
		<u-action-sheet
			:list="darkModeOptions"
			v-model="showDarkModePopup"
			@click="setDarkMode"
			cancelText="取消"
		></u-action-sheet>
		
		<!-- 弹出选择 - 字体大小 -->
		<u-action-sheet
			:list="fontSizeOptions"
			v-model="showFontSizePopup"
			@click="setFontSize"
			cancelText="取消"
		></u-action-sheet>
		
		<!-- 弹出提示 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import tools from '@/mixin/tools.js'
	
	export default {
		mixins: [tools],
		data() {
			return {
				// 通知设置
				notificationLevel: 1, // 0: 关闭, 1: 仅重要, 2: 全部
				showNotificationPopup: false,
				notificationOptions: [
					{
						text: '关闭所有通知',
						value: 0
					},
					{
						text: '仅接收重要通知',
						value: 1
					},
					{
						text: '接收所有通知',
						value: 2
					}
				],
				
				// 声音振动
				soundEnabled: true,
				
				// 深色模式
				darkMode: 0, // 0: 跟随系统, 1: 浅色, 2: 深色
				showDarkModePopup: false,
				darkModeOptions: [
					{
						text: '跟随系统',
						value: 0
					},
					{
						text: '浅色模式',
						value: 1
					},
					{
						text: '深色模式',
						value: 2
					}
				],
				
				// 字体大小
				fontSize: 1, // 0: 小, 1: 中, 2: 大
				showFontSizePopup: false,
				fontSizeOptions: [
					{
						text: '小',
						value: 0
					},
					{
						text: '中',
						value: 1
					},
					{
						text: '大',
						value: 2
					}
				],
				
				// 缓存大小
				cacheSize: '8.5MB'
			}
		},
		computed: {
			notificationText() {
				const options = {
					0: '关闭',
					1: '仅重要',
					2: '全部'
				}
				return options[this.notificationLevel]
			},
			darkModeText() {
				const options = {
					0: '跟随系统',
					1: '浅色',
					2: '深色'
				}
				return options[this.darkMode]
			},
			fontSizeText() {
				const options = {
					0: '小',
					1: '中',
					2: '大'
				}
				return options[this.fontSize]
			}
		},
		onLoad() {
			console.log('系统设置页面加载')
			// 加载用户设置
			this.loadUserSettings()
		},
		methods: {
			// 加载用户设置
			loadUserSettings() {
				// 这里可以从本地存储或服务器获取用户设置
				// 示例代码，实际开发中需要替换为真实实现
				try {
					const settings = uni.getStorageSync('userSettings')
					if (settings) {
						const data = JSON.parse(settings)
						this.notificationLevel = data.notificationLevel || 1
						this.soundEnabled = data.soundEnabled !== undefined ? data.soundEnabled : true
						this.darkMode = data.darkMode || 0
						this.fontSize = data.fontSize || 1
					}
				} catch (e) {
					console.error('加载设置失败', e)
				}
			},
			
			// 保存用户设置
			saveUserSettings() {
				const settings = {
					notificationLevel: this.notificationLevel,
					soundEnabled: this.soundEnabled,
					darkMode: this.darkMode,
					fontSize: this.fontSize
				}
				
				try {
					uni.setStorageSync('userSettings', JSON.stringify(settings))
				} catch (e) {
					console.error('保存设置失败', e)
				}
			},
			
			// 通知设置
			showNotificationSetting() {
				this.showNotificationPopup = true
			},
			setNotification(index) {
				this.notificationLevel = this.notificationOptions[index].value
				this.saveUserSettings()
				this.$refs.uToast.show({
					title: '通知设置已更新',
					type: 'success'
				})
			},
			
			// 声音设置
			toggleSound() {
				this.soundEnabled = !this.soundEnabled
				this.saveUserSettings()
				this.$refs.uToast.show({
					title: this.soundEnabled ? '声音已开启' : '声音已关闭',
					type: 'success'
				})
			},
			
			// 深色模式设置
			showDarkModeSetting() {
				this.showDarkModePopup = true
			},
			setDarkMode(index) {
				this.darkMode = this.darkModeOptions[index].value
				this.saveUserSettings()
				this.$refs.uToast.show({
					title: '显示模式已更新',
					type: 'success'
				})
				// 这里可以添加实际的深色模式切换逻辑
			},
			
			// 字体大小设置
			showFontSizeSetting() {
				this.showFontSizePopup = true
			},
			setFontSize(index) {
				this.fontSize = this.fontSizeOptions[index].value
				this.saveUserSettings()
				this.$refs.uToast.show({
					title: '字体大小已更新',
					type: 'success'
				})
				// 这里可以添加实际的字体大小调整逻辑
			},
			
			// 清除缓存
			clearCache() {
				uni.showModal({
					title: '清除缓存',
					content: '确定要清除所有缓存数据吗？',
					success: (res) => {
						if (res.confirm) {
							// 模拟清除缓存操作
							uni.showLoading({
								title: '清除中...'
							})
							
							setTimeout(() => {
								uni.hideLoading()
								this.cacheSize = '0KB'
								this.$refs.uToast.show({
									title: '缓存已清除',
									type: 'success'
								})
							}, 1000)
						}
					}
				})
			},
			
			// 数据备份
			backupData() {
				uni.showLoading({
					title: '备份中...'
				})
				
				setTimeout(() => {
					uni.hideLoading()
					this.$refs.uToast.show({
						title: '数据备份成功',
						type: 'success'
					})
				}, 1500)
			},
			
			// 检查更新
			checkUpdate() {
				uni.showLoading({
					title: '检查中...'
				})
				
				setTimeout(() => {
					uni.hideLoading()
					uni.showModal({
						title: '版本信息',
						content: '当前已是最新版本 1.0.0',
						showCancel: false
					})
				}, 1000)
			},
			
			// 查看协议
			showAgreement(type) {
				const title = type === 'user' ? '用户协议' : '隐私政策'
				// 实际应用中应该跳转到对应的协议页面
				uni.showToast({
					title: `正在查看${title}`,
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background-color: #f8f8f8;
	}
	
	.content {
		padding: 20rpx;
	}
</style> 